<!-- 员工管理 -->
<template>
    <div>

        <div v-show="isShowChart">
        <div id="div1">
            <span>员工姓名: </span>
            <el-input class="biank" v-model="yuangong_input" placeholder="请输入内容"></el-input>
            <span class="span">联系方式: </span>
            <el-input class="biank" v-model="lianxi_input" placeholder="请输入内容"></el-input>
            <span class="span">身份证号: </span>
             <el-input class="biank" v-model="shenfen_input" placeholder="请输入内容"></el-input>
        </div>
        <div class="div2">
             <span>所属部门: </span>
             <el-select class="span" v-model="bumeng_value" filterable placeholder="请选择">
             <el-option v-for="item in bumeng_option" :key="item.value" :label="item.label" :value="item.value">
             </el-option>
             </el-select>
            <span class="span">所属岗位: </span>
             <el-select class="span" v-model="gangwei_value" filterable placeholder="请选择">
             <el-option v-for="item in gangwei_option" :key="item.value" :label="item.label" :value="item.value">
             </el-option>
             </el-select>
            <span class="spans">状态: </span>
              <el-select class="span" v-model="zhuangtai_value" filterable placeholder="请选择">
             <el-option v-for="item in zhuangtai_option" :key="item.value" :label="item.label" :value="item.value">
             </el-option>
             </el-select>
        </div>
        <div>
            <el-button class="anniu" type="primary">查询</el-button>
            <el-button >重置</el-button>
        </div>
        <el-button @click="xinzeng" class="anniu" type="primary">新增</el-button>
        <!-- 表单 -->
        <el-table :cell-style="rowStyle" :data="tableData" border style="width: 100%" >
          <el-table-column header-align="center" prop="id" label="序号" width="50">
          </el-table-column>
          <el-table-column header-align="center" prop="imgSrc" label="头像">
             <!-- <template slot-scope="scope">
                <el-image style="width: 100px; height: 100px" :src="host+scope.row.imgSrc"></el-image> -->
                <!-- 假设b页面也有动态图片  你也要引入api.js这个文件 -->
                <!-- <el-image style="width: 100px; height: 100px" :src="'http://localhost:3000'+scope.row.imgSrc"></el-image> -->
                <!-- 如果b文件要用动态图片  我直接拼接字符串  不比你上面的写法要方便简单么 -->
                <!-- 100个地方都写了地址   ip变了  下面的方法 意味着我要改100次  100个地方 还会有忘的风险 而上面 我只用改一个地方 -->
            <!-- </template> -->
          </el-table-column>
          <el-table-column header-align="center" prop="name" label="姓名" width="50">
          </el-table-column>
          <el-table-column header-align="center" prop="contact" label="联系方式">
          </el-table-column>
          <el-table-column header-align="center" prop="number" label="身份证号">
          </el-table-column>
          <el-table-column header-align="center" prop="department" label="所属部门">
          </el-table-column>
           <el-table-column header-align="center" prop="post" label="所属岗位">
          </el-table-column>
           <el-table-column header-align="center" prop="account" label="账号">
          </el-table-column>
          <el-table-column header-align="center" prop="password" label="密码">
          </el-table-column>
          <el-table-column header-align="center" prop="person" label="创建人">
          </el-table-column>
          <el-table-column header-align="center" prop="date" label="创建日期">
          </el-table-column>
          <el-table-column header-align="center" prop="state" label="状态">
          </el-table-column>
          <el-table-column header-align="center" label="操作" width="200">
              <template>
                <el-button @click="biany" class="src" type="text" size="small">编辑</el-button>
                <el-button class="src" type="text" size="small">启用</el-button>
                <el-button class="src" type="text" size="small">删除</el-button>
              </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination background layout="prev, pager, next" @current-change='handelCurrentPage' :current-page='currentPage' :page-size="pageSize" :total="total">
        </el-pagination>
        </div>

        <!-- 新增页面 -->
        <div id="xize" v-show="isShowTable">
            <div class="img">
                <span>员工头像: </span>
                <img src="" alt="">
                <el-button class="src" type="text" size="small">重新上传</el-button>
            </div>
            <div class="img">
                <span style="font-family:'Helvetica',sans-serif;color:#FF3B30;">* </span>
                <span>员工姓名: </span>
                <el-input class="bianks" v-model="xinmin_input" placeholder="请输入员工姓名"></el-input>
            </div>
            <div class="img">
                <span style="font-family:'Helvetica',sans-serif;color:#FF3B30;">* </span>
                <span>性别: </span>
                <span class="xibe">
                <el-radio v-model="radio" label="1">男</el-radio>
                <el-radio v-model="radio" label="2">女</el-radio>
                </span>
            </div>
            <div class="img">
                <span style="font-family:'Helvetica',sans-serif;color:#FF3B30;">* </span>
                <span>联系方式: </span>
                <el-input class="bianks" v-model="fangshi_input" placeholder="请输入联系方式"></el-input>
            </div>
            <div class="img">
                <span style="font-family:'Helvetica',sans-serif;color:#FF3B30;">* </span>
                <span>身份证号码: </span>
                <el-input class="bianks" v-model="haoma_input" placeholder="请输入身份证号"></el-input>
            </div>
            <div class="img">
                <span style="font-family:'Helvetica',sans-serif;color:#FF3B30;">* </span>
                <span>所属部门: </span>
                <el-select class="bianks" v-model="suosubu_value" filterable placeholder="企业管理中心">
                <el-option v-for="item in suosubu_option" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
                </el-select>
            </div>
            <div class="img">
                <span style="font-family:'Helvetica',sans-serif;color:#FF3B30;">* </span>
                <span>是否部门负责人: </span>
                <span class="xibe">
                <el-radio v-model="fuzeren_radio" label="1">是</el-radio>
                <el-radio v-model="fuzeren_radio" label="2">否</el-radio>
                </span>
            </div>
             <div class="img">
                <span style="font-family:'Helvetica',sans-serif;color:#FF3B30;">* </span>
                <span>所属岗位: </span>
                <el-select class="bianks" v-model="suosuwei_value" filterable placeholder="企业信息采集员">
                <el-option v-for="item in suosuwei_option" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
                </el-select>
            </div>
            <div class="img">
                <span style="font-family:'Helvetica',sans-serif;color:#FF3B30;">* </span>
                <span>账号: </span>
                <el-input class="bianks" v-model="zanghao_input" placeholder="请输入账号"></el-input>
            </div>
            <div class="img">
                <span style="font-family:'Helvetica',sans-serif;color:#FF3B30;">* </span>
                <span>密码: </span>
                <el-input class="bianks" v-model="mima_input" placeholder="请输入密码"></el-input>
            </div>
            <div class="img">
                <span style="font-family:'Helvetica',sans-serif;color:#FF3B30;">* </span>
                <span>出生年月: </span>
                <el-select class="bianks" v-model="nianyue_value" filterable placeholder="请选择">
                <el-option v-for="item in nianyue_option" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
                </el-select>
            </div>
            <div class="img">
                <span style="font-family:'Helvetica',sans-serif;color:#FF3B30;">* </span>
                <span>适用考勤模板: </span>
                <el-select class="bianks" v-model="kaoqin_value" filterable placeholder="请选择">
                <el-option v-for="item in kaoqin_option" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
                </el-select>
            </div>

            <div class="aniu">
            <el-button @click="fh" class="an">取消</el-button>
            <el-button @click="quer" class="an" type="primary">确认</el-button>
            </div>
        </div>

    </div>
</template>

<script>
export default { 
//import引入的组件需要注入到对象中才能使用
components: {
},
//监听属性 类似于data概念
computed:{
    nowData(){
        let qishi = (this.nowPage - 1) * 6
        return this.tableData.slice(qishi,qishi + 6)
    },
    maxPage(){
        return Math.ceil(this.tableData.length / 6)
    }
},
data() {
//这里存放数据
return {
    yuangong_input: '',
    lianxi_input: '',
    shenfen_input: '',

    //新增页面框
    xinmin_input: '',
    fangshi_input: '',
    haoma_input: '',
    zanghao_input: '',
    mima_input: '',
    //是否男女选择
     radio: '1',
     fuzeren_radio: '1',

    isShowChart: true,
    isShowTable: false,
    tableData:[],

    bumeng_option: [{
          value: '选项1',
          label: '请选择'
        }],
        bumeng_value: '',
    gangwei_option: [{
          value: '选项1',
          label: '请选择'
        }],
        gangwei_value: '',
    zhuangtai_option: [{
          value: '选项1',
          label: '请选择'
        }],
        zhuangtai_value: '',

        // 新增页面选择框
    suosubu_option: [{
        value: '选项1',
        label: '企业管理中心',
    },
    {
        value: '选项2',
        label: '请选择'
    }],
    suosubu_value: '',
    suosuwei_option: [{
        value: '选项1',
        label: '企业信息采集员',
    },
    {
        value: '选项2',
        label: '请选择'
    }],
    suosuwei_value: '',
    nianyue_option: [{
        value: '选项1',
        label: '请选择',
    },
    {
        value: '选项2',
        label: '2022-5-10'
    }],
    nianyue_value: '',
    kaoqin_option: [{
        value: '选项1',
        label: '请选择',
    }],
    kaoqin_value: '',
    
    //数据分页
    currentPage: 1,
    pageSize: 3,
    total: 1,
    
};                                                                                    
},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    //获取全部数据
    getStaff(){
       this.$axios({
            url: '/organization/employeeIn',
            method: 'get',
            params: {
                currentPage: this.currentPage,
                pageSize: this.pageSize
            }
        }).then(res =>{
            console.log(res);
            if(res.data.code == 200){
                this.tableData = res.data.data
                this.currentPage=res.data.total
            }
        })
   },
   handelCurrentPage(index){
        this.currentPage=index;
        this.getStaff()
    },

      // 删除
    open() {
        const h = this.$createElement;
        this.$msgbox({
          title: '删除确认',
          message: h('p', null, [
            h('span', null, '是否确认删除该员工',),
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {6
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 1000);
            } else {
              done();
            }
          }
        }).then(action => {

          this.$message({
            type: 'info',
            message: 'action: 删除成功' + action
          });
        });
    },
    //表单内容居中
    rowStyle(){
        return "text-align:center"
    },
    //跳转页面
    xinzeng(){
        this.isShowChart = !this.isShowChart;
        this.isShowTable = !this.isShowTable;
    },
    fh(){
        this.isShowChart = !this.isShowChart;
        this.isShowTable = !this.isShowTable;
    },
    quer(){
        this.isShowChart = !this.isShowChart;
        this.isShowTable = !this.isShowTable;
    },
    biany(){
        this.isShowChart = !this.isShowChart;
        this.isShowTable = !this.isShowTable;
    },
},
  
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    //console.log(this.tableData);
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
    this.getStaff()
},
}
</script>
<style lang='less' scoped>
#div1{
    margin-top: 80px;
}
.div2{
    margin-top: 20px;
}
.anniu{
    margin-top: 20px;
    margin-bottom: 20px;
}
.src{
    font-size: 14px;
}
.biank{
    width: 221.4px;
    margin-left: 20PX;
}
.span{
    margin-left: 20px;
}
.spans{
    margin-left: 52px;
}
#xize{
    width: 100%;
    margin-top: 80px;
}
.img{
    width: 100%;
    padding-top: 40px;
    margin-left: 120px;
}
.xibe{
    margin-left: 20px;
}
.bianks{
    width: 400px;
    margin-left: 20PX;
}
.an{
    width: 100px;
    height: 45px;
}
.aniu{
    width: 250px;
    margin-left: 350px;
    margin-top: 80px;

}

</style>